<template>
	<view>
		<uni-nav-bar @clickLeft="clickLeft" backgroundColor="#f1f1f1" leftWidth="45rpx" rightWidth="0" leftIcon="left" fixed statusBar border="false">
			<view class="head-input">
				<u-search v-model="content" @focus="clickLeft" :clearabled="false" :show-action="false" searchIconColor="#f18b49" bgColor="#ffffff" placeholder="搜索你要购买的商品" class="u-search"></u-search>
				<!-- <text v-show="content != ''" class="head-btn" @click="search()">搜索</text> -->
			</view>
		</uni-nav-bar>
		<view style="position: fixed; z-index: 100;width: 750rpx; background: #f1f1f1;">
			<view class="head-tab">
				<view class="left-tab" :class="{'tab-active' : current === 0}" @click="clickTab(0)">
					<text>{{ leftTit }}</text>
					<uni-icons type="bottom" size="18" :color="current === 0 ? 'tab-active' : ''"></uni-icons>
				</view>
				<view class="right-tab">
					<text :class="{'tab-active' : current === 1}" @click="clickTab(1)">销量</text>
				</view>
			</view>
		</view>
		<u-popup :show="showPop" @close="close" mode="top" round="20" safeAreaInsetTop >
			<view class="head-pop">
				<text v-for="item,i in popList" :key="i" @click="clickPop(item,i)">{{ item }}</text>
			</view>
		</u-popup>
		<view class="pro-list" v-show="show">
			<u-empty v-if="proList == ''" mode="list" style="padding-top: 100rpx;" iconColor="#f18b49" text="该商品暂时缺货,再等等"></u-empty>
			<view class="pro-list-box" v-else>
				<view class="list-box" v-for="(item,index) in proList" :key="index">
					<view class="list-img" @click="toProductDetail(item.id)">
						<image :src="baseUrl + item.img" mode="widthFix"></image>
					</view>
					<view class="">
						<view class="list-cont" @click="toProductDetail(item.id)">{{ item.name }}</view>
						<view class="price-box">
							<view class="list-price">
								<text>￥</text>{{ item.sell_price }}
							</view>
							<view style="font-size: 24rpx;color: #999;">
								<text>销量：</text>{{ item.sale }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				leftId: 0,
				current: 0,
				userId: '',
				content: '',
				proList: [],
				show: false,
				leftTit: '综合',
				showPop: false,
				baseUrl: 'https://gjc.hy-dzsc.cn/',
				popList: ['综合', '价格降序', '价格升序'],
			}
		},
		onLoad(e) {
			this.content = e.content
			this.userId = e.userId
			this.search()
		},
		onReachBottom(){
			this.page++
			if(this.leftId == 1) {
				this.search('sell_price','desc')
			} else if(this.leftId == 2) {
				this.search('sell_price','asc')
			} else if(this.leftId == 4){
				this.search('sale')
			} else {
				this.search()
			}
		},
		methods: {
			// 查询商品
			search(order,by) {
				if(!order && !by){
					this.$getHttp(`/gjcApi/fuzzyQuery?user_id=${this.userId}&name=${this.content}&page=${this.page}`, {}, res => {
						this.searchData(res)
					})
				} else if(order && by){
					this.$getHttp(`/gjcApi/fuzzyQuery?user_id=${this.userId}&name=${this.content}&page=${this.page}&order=${order}&by=${by}`, {}, res => {
						this.searchData(res)
					})
				} else {
					this.$getHttp(`/gjcApi/fuzzyQuery?user_id=${this.userId}&name=${this.content}&page=${this.page}&order=${order}`, {}, res => {
						this.searchData(res)
					})
				}
			},
			searchData(res){
				if(res.let == 0 && this.page != 1){
					this.page--
					uni.showToast({
						title: '没有更多数据了',
						duration: 1000,
						icon: 'none'
					})
				} else {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					setTimeout(() => {
						res.goo.forEach(v => {
							this.proList.push(v)
						})
						// this.proList = this.proList.concat(res)
						uni.hideLoading()
						this.show = true
					},800)
				}
			},
			clickTab(index) {
				this.current = index
				if(this.current == 0){
					this.showPop = true
				} else {
					this.leftId = 4
					this.proList = []
					this.page = 1
					this.search('sale')
				}
			},
			// 选择顶部弹框内容
			clickPop(item,i){
				this.leftTit = item
				this.leftId = i
				if(this.leftId == 1){
					this.proList = []
					this.page = 1
					this.search('sell_price','desc')
				} else if(this.leftId == 2){
					this.proList = []
					this.page = 1
					this.search('sell_price','asc')
				} else {
					this.proList = []
					this.page = 1
					this.search()
				}
				this.showPop = false
			},
			// 关闭模态框
			close() {
				this.showPop = false
			},
			// 返回上一页
			clickLeft(){
				uni.navigateBack({
					delta: 1
				})
			},
			// 跳转商品详情
			toProductDetail(id){
				uni.navigateTo({
					url: `/pages/class/product-detail?proId=${id}&userId=${this.userId}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.head-input{
	display: flex;
	align-items: center;
	.u-search{
		width: 648rpx;
		position: relative;
	}
	.head-btn{
		right: 28rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		position: absolute;
		background: #ff914d;
		padding: 10rpx 30rpx;
		border-radius: 40rpx;
	}
}
.tab-active{
	color: $uni-text-color;
}
.head-tab{
	display: flex;
	padding: 15rpx 0;
	font-size: 32rpx;
	align-items: center;
	justify-content: space-around;
	.left-tab{
		display: flex;
		align-items: center;
	}
}
.head-pop{
	display: flex;
	padding: 20rpx 30rpx;
	flex-direction: column;
	text{
		font-size: 28rpx;
		padding: 20rpx 0;
	}
	.u-divider{
		margin: 0;
	}
}
.pro-list {
	padding: 65rpx 10rpx 10rpx 10rpx;
	.pro-list-box {
		display: flex;
		flex-wrap: wrap;
		padding-top: 20rpx;
		justify-content: space-between;
		.list-box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 360rpx;
			border-radius: 15rpx;
			margin-bottom: 15rpx;
			padding-bottom: 20rpx;
			background: $uni-model-color;
			.list-img {
				text-align: center;
				padding: 10rpx 10rpx 0 10rpx;
				image {
					width: 100%;
					// height: 300rpx;
					border-radius: 10rpx;
					// border: 2rpx solid $uni-text-color;
				}
			}
			.list-cont {
				font-size: 28rpx;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				margin: 6rpx 0 30rpx 0;
				padding: 5rpx 20rpx 0 20rpx;
				-webkit-box-orient: vertical;
				text {
					color: $uni-model-color;
					font-size: 24rpx;
					margin-right: 6rpx;
					padding: 2rpx 12rpx;
					border-radius: 20rpx;
					background: $uni-text-color;
				}
			}
			.price-box {
				display: flex;
				padding: 0 20rpx;
				align-items: center;
				justify-content: space-between;
				.list-price {
					font-size: 34rpx;
					font-weight: bold;
					color: $uni-text-color;
					text {
						font-size: 24rpx;
					}
				}
			}
		}
	}
}
</style>
